<template>


    <div class="container">
      <div style="height:100%;">

        <div style="height:40%;">
          <div style="height:5%;">
            <el-row :gutter="12" style="padding:6px 0 0 0;margin-bottom:0px;border-style: none; " >
              <!-- 图片部分-->
              <div class="clearfix d1" >
                <div class=" z1" >
                  <el-image
                    style="width: 100%;  height: 80px ; "
                    :src="require('@/assets/images/sy.png')">

                  </el-image>
                </div>
                <div  class=" y1">

                  <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#30303c"
                    text-color="whitesmoke"
                    active-text-color="whitesmoke"
                    style="height: 80px;width: 100%"
                  >
                    <el-menu-item index="1" style="height: 80px; padding: 15px 50px 0 50px ;">
                      <span style="font-size: 20px; color: whitesmoke; "><b>首页</b></span>
                    </el-menu-item>
                    <el-submenu index="2" style="height: 80px; padding: 10px 50px 0 50px ;">
                      <template slot="title" style="height: 80px; padding: 10px 50px 0 50px ;">
                        <span style="font-size: 20px; color: whitesmoke"><b>成果管理</b></span>
                      </template>
                      <el-menu-item index="2-1">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-2">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-3">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>

                    </el-submenu>
                    <el-submenu index="3" style="height: 80px; padding: 10px 50px 0 50px ;">
                      <template slot="title" style="height: 80px; padding: 10px 50px 0 50px ;">
                        <span style="font-size: 20px; color: whitesmoke"><b>成果转化</b></span>
                      </template>
                      <el-menu-item index="2-1">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-2">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-3">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>

                    </el-submenu>
                    <el-submenu index="4" style="height: 80px; padding: 10px 50px 0 50px ;">
                      <template slot="title" style="height: 80px; padding: 10px 50px 0 50px ;">
                        <span style="font-size: 20px; color: whitesmoke"><b>合同管理</b></span>
                      </template>
                      <el-menu-item index="2-1">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-2">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-3">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>

                    </el-submenu>
                    <el-submenu index="5" style="height: 80px; padding: 10px 50px 0 50px ;">
                      <template slot="title" style="height: 80px; padding: 10px 50px 0 50px ;">
                        <span style="font-size: 20px; color: whitesmoke"><b>费用管理</b></span>
                      </template>
                      <el-menu-item index="2-1">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-2">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>
                      <el-menu-item index="2-3">
                        <span style="font-size: 20px; color: whitesmoke"><b>首页</b></span>
                      </el-menu-item>

                    </el-submenu>


                  </el-menu>


                </div>
                <div class=" y2">
                  <el-button class="an2" >登录</el-button>
                  <el-button class="an2" >注册</el-button>

                </div>

              </div>

            </el-row>
          </div>
          <div style="height:35%;">
            <el-row :gutter="12" style="padding:6px 6px 0 0;margin-bottom:16px; " >
              <!-- 图片部分-->

              <el-card class="box-card bj" shadow="hover" >

                <div  class="clearfix">
                  <div style="padding:70px 0 0 80px;">
                    <span style="font-size: 30px; color: whitesmoke"><b>科技成果</b></span>
                  </div>
                  <div style="padding:50px 0 0 80px;">
                    <span style="font-size: 22px; color: whitesmoke"><b>集结行业最优科技成果转化项目,技术持有者可自由发布行业顶尖成果</b></span>
                  </div>


                </div>
                <div  class="clearfix" style="padding:60px 0 0 20px;">

                  <span style="font-size: 20px; color: whitesmoke"><b>首页·科技成果·成果详情</b></span>

                </div>

              </el-card>


            </el-row>

          </div>
        </div>
      <!-- 左侧内容 -->
        <div style="height:60%; display:flex;">
      <div class="left">
        <!-- 左侧内容的具体实现 -->
        <div>

          <div style="margin-bottom: 20px;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">基本信息</el-menu-item>
              <el-menu-item index="2">
                <a href="#achievement-info"   offset="-1000">成果简介</a>
              </el-menu-item>
              <el-menu-item index="3">
                <a href="#innovation-info"  offset="-1000">创新点描述</a>
              </el-menu-item>
              <el-menu-item index="4">
                <a href="#contest-info">参赛经历</a>
              </el-menu-item>
            </el-menu>
          </div>


          <el-row>
            <el-col :span="20">

              <!--            <div style="padding-bottom: 20px;">
                            <span style="font-weight:bold; font-size: 17px;">基本信息</span>

                          </div>-->
              <el-descriptions column="1" class="my-descriptions" style="margin-left: 10.5px;">
                <el-descriptions-item label="成果名称">
                  <strong style="color: black;">一种基于零中频解调原理的频率特性测试仪</strong>
                </el-descriptions-item>
              </el-descriptions>


              <el-descriptions column="2" class="my-descriptions" style="margin-bottom: 30px; margin-left: 10.5px;">
                <el-descriptions-item label="成果类型">创新训练项目</el-descriptions-item>
                <el-descriptions-item label="成果类别">软件著作权</el-descriptions-item>
                <el-descriptions-item label="负责人">郑力</el-descriptions-item>
                <el-descriptions-item label="负责人学号">2020009023</el-descriptions-item>
                <el-descriptions-item label="负责人学院">信息科学与技术学院</el-descriptions-item>
                <el-descriptions-item label="指导教师">常明琴 副高级 有机化学实验及商品与分析实验</el-descriptions-item>
                <el-descriptions-item label="技术领域">节能环保和资源综合利用</el-descriptions-item>
                <el-descriptions-item label="负责人专业">软件工程</el-descriptions-item>
              </el-descriptions>

            </el-col>
            <el-col :span="4">
              <el-button class="color-btn" type="primary" >全文 PDF 下载</el-button>
            </el-col>
          </el-row>


          <div id="achievement-info" style="padding-top: 90px;">
               <div style="padding-bottom: 20px;">
               <span style="font-weight:bold; font-size: 20px;">成果简介</span>
              </div>
              <el-descriptions :colon="false" style="margin-bottom: 30px;font-size: 18px;">
              <el-descriptions-item >
              <span style="text-align: justify; text-align-last: left; ">
               结核病是一种主要由结核分枝杆菌引起的首要呼吸道疾病，是全球第九大致死性疾病。随着耐药结核病的传播变异，临床医师的选择愈来愈少。
               近年来鲜有抗结核病新药上市。本产品运用自研新型合成技术，设计了以3-芳烯基峰喔咻-2-酸主要构的新型高效抗结核的峰咻药物，
               在抗结核分枝杆菌方面具有特效作用。创制了新的扩结核药物分子，
               在抗结核活性的选择性和耐药性表现出优异的药效，为今后新型抗结材药物开发方面提供了重要的参考。
               </span>
              </el-descriptions-item>
              </el-descriptions>
          </div>


          <div   id="innovation-info" style="padding-top: 90px;">
            <div style="padding-bottom: 20px;">
              <span style="font-weight:bold; font-size: 20px;">创新点描述</span>
            </div>
            <el-descriptions  :colon="false" style="margin-bottom: 30px;font-size: 18px;">
              <el-descriptions-item >
          <span style="text-align: justify; text-align-last: left; ">
            本项目以 3- 芳乙烯基隆喔咻 -2- 酸主要结构的新型高效抗结核的隆药物在抗结
            核分枝杆菌方面具有特效作用，创制了新的抗结核药物分子、提供
          了崭新的结构模型在新型抗结核药物开发方面提供了更好的参考，枝杆菌方面具有特效作用，创制了新的抗结核药物分子、提供
          了崭新的结构模型在新型抗结核药物开发方面提供了更好的参考。
          </span>

              </el-descriptions-item>

            </el-descriptions>

            <div class="wrapper" >
              <div class="left-img">
                <img src="~@/assets/images/example.jpeg" alt="Your image description" />
                <p class="text" >台成药品的样品 1</p>
              </div>
              <div class="left-img">
                <img src="~@/assets/images/example.jpeg" alt="Your image description" />
                <p class="text">台成药品的样品 2</p>
              </div>
            </div>
          </div>

          <div   id="contest-info" style="padding-top: 80px;">
            <div style="padding-bottom: 20px;">
              <span style="font-weight:bold; font-size: 20px;">参赛经历</span>
            </div>
            <el-descriptions :colon="false">
              <el-descriptions-item>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="date"
                    label="竞赛名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="获奖时间"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="奖励级别">
                  </el-table-column>
                </el-table>
              </el-descriptions-item>
            </el-descriptions>


          </div>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="right" style="margin-top: 30px;">
        <!-- 右侧内容的具体实现 -->
        <div class="patent-list-container">
        <div class="card-header">
          <span class="card-title" style="font-size :20px">相似专利</span>

        </div>

          <div class="panel-body">
            <table class="myTab">

              <tr>
                <td>
                  <a href="#">
                  <div class="bg-img aprv_yes" >
                    <img src="~@/assets/images/example.jpeg" />
                  </div>
                  </a>
                </td>
                <td>
                  <a href="#">
                    <span style="font-size :18px">一种手指保护套</span><br>
                    <span style="font-size :15px">1640638000159399936</span><br>
                    <span style="font-size :15px">渤海大学</span>
                  </a>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-divider style="width: 100%;">
                    <span slot="content" class="divider-inner" style="margin: 0;"></span>
                  </el-divider>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="#">
                    <div class="bg-img aprv_yes" >
                      <img src="~@/assets/images/example.jpeg" />
                    </div>
                  </a>
                </td>
                <td>
                  <a href="#">
                    <span style="font-size :18px">一种手指保护套</span><br>
                    <span style="font-size :15px">1640638000159399936</span><br>
                    <span style="font-size :15px">渤海大学</span>
                  </a>
                </td>
              </tr>
             <!--  分割线样式-->
              <tr>
                <td colspan="2">
                  <el-divider style="width: 100%;">
                    <span slot="content" class="divider-inner" style="margin: 0;"></span>
                  </el-divider>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="#">
                    <div class="bg-img aprv_yes" >
                      <img src="~@/assets/images/example.jpeg" />
                    </div>
                  </a>
                </td>
                <td>
                  <a href="#">
                    <span style="font-size :18px">一种手指保护套</span><br>
                    <span style="font-size :15px">1640638000159399936</span><br>
                    <span style="font-size :15px">渤海大学</span>
                  </a>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-divider style="width: 100%;">
                    <span slot="content" class="divider-inner" style="margin: 0;"></span>
                  </el-divider>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="#">
                    <div class="bg-img aprv_yes" >
                      <img src="~@/assets/images/example.jpeg" />
                    </div>
                  </a>
                </td>
                <td>
                  <a href="#">
                    <span style="font-size :18px">一种手指保护套</span><br>
                    <span style="font-size :15px">1640638000159399936</span><br>
                    <span style="font-size :15px">渤海大学</span>
                  </a>
                </td>
              </tr>

            </table>
          </div>

        </div>
      </div>
    </div>
      </div>
    </div>

</template>

<script>


export default {
  methods: {




  },

    data() {
      return {

        activeIndex: '1',
        tableData: [{
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }, {
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }, {
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }, {
          date: '2022年“建行杯”第八届互联网十大学生创新创业大赛',
          name: '2022年9月',
          address: '省级金奖'
        }],

        form: {
          name: '',
        }
      }
    }
}

</script>

<style lang="scss" scoped>
.el-table {

  margin-bottom: 20px;
  font-size: 18px;
}

.d1{display: flex;height: 80px;scroll-padding: 0}
.z1{
  width: 25%;
  height: 80px;

}
.y1{
  width: 60%;
  height: 80px;

}
.y2{
  padding-top: 22px;
  padding-left: 65px;
  width: 15%;
  height: 80px;
  background-color: #30303c;
}
.container {
  display: flex;

  margin: 1rem 0;
}
.color-btn {
  background-color: #0d3e99;
  color: #ffffff; /* 设置文字颜色为白色 */
  font-size: 18px;
}
.my-descriptions {
  font-size: 18px;
}
.left {
  flex: 8; /* 左侧宽度占总宽度的 70% */
  margin-right: 30px; /* 添加右侧边距 */
  margin-left: 30px;
}

.right {
  flex: 2; /* 右侧宽度占总宽度的 30% */
  margin-right: 20px;

}
.top-img {
  display:flex;
  justify-content:center;
  align-items:center;
}
.top-img img {
  width:100%;
  height: 350px;
}
.card-header {
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.wrapper {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.left-img {
  display: inline-block;
  text-align: center;
}

.left-img img {
  display: block; /* 去除 img 自有的下边距 */
  height: 200px;
  width: 300px;
  display: flex;
  flex-direction: column; /* 竖直排列 */
  align-items: center; /* 子元素居中 */
  margin: 20px 20px;
}

/*背景图片div的宽度*/
img {
  display: block; /* 去除 img 自有的下边距 */
  height: 80px; /* 设定图片高度为 200px */
  width: 80px;

}

/* 设置分割线所处的父元素宽度为100% */
.myTab {
  width: 100%;
}
.text {
  font-size: 18px;
}

.my-divider {
  margin-top: 4px; /* 调整分隔线与上方元素之间的垂直间距 */
  margin-bottom: 10px; /* 调整分隔线与下方元素之间的垂直间距 */
}
.el-menu-item {
  margin-right: 20px;
  font-weight: bold; /* 设置字体加粗 */
  font-size: 20px;
  color: #000; /* 设置字体颜色为黑色 */
  text-indent: -1em; /* 将文字整体向左移动一个字符 */
  line-height: 50px; /* 以你锚点所在元素的高度为准 */

}

.el-menu--horizontal {
  border-bottom: none;/* 去掉水平线 */
}
.el-menu-item,
.el-menu-item:hover {
  color: #333 !important;
}

.patent-list-container {

  border: 2px solid #e1e6f6;
  padding: 1rem;
}
.el-menu-item.is-active {
  border-bottom: 2px solid #409EFF;
  padding-bottom: 1px; /* 将下划线拉近文字 */
}
/*背景*/
.bj{
  background-image: url("keji.png");
  background-size: 100% 100%;
  height: 300px;
}
</style>
